<template>
<div class="dashboard-container">
    <div class="app-container">
        <el-card>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="登录账户设置" name="loginCount">
                    <el-form
                        ref="userForm"
                        :rules="formRules"
                        class="userForm"
                        :model="formData"
                        label-width="80px"
                    >
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username" :placeholder="formHolder.holderName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" :placeholder="formHolder.holderPass"></el-input>
                        </el-form-item>
                        <el-row v-show="formData.password ||formData.username" type="flex" justify="center">
                            <el-button type="primary" @click="handleSubmit">提交</el-button>
                            <el-button @click="handleCancel">取消</el-button>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="个人详情" name="userDetail">
                    <component :is="detailUserInfo" />
                </el-tab-pane>
                <el-tab-pane label="岗位信息" name="workInfo">
                    <component :is="detailJobInfo" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</div>
</template>

<script>
import { updateUserDetailById, getUserDetailById } from '@/api/employees.js'
import { removeToken } from '@/utils/auth.js'
import detailUserInfo from '../components/detailUserInfo.vue'
import detailJobInfo from '../components/detailJobInfo.vue'
export default {
	data() {
		return {
			/* 自定义组件 */
			detailUserInfo,
			detailJobInfo,
			activeName: 'loginCount',
			/* 表单信息 */
			formData: {
				username: '',
				password: ''
			},
			/* 表单holder */
			formHolder: {
				holderName: '',
				holderPass: ''
			},
			/* 表单提交栏 */
			isInfoChange: false,
			formRules: {
				username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ min: 6, max: 9, message: '密码长度6-9位', trigger: 'blur' }
				]
			}
		}
	},
	async created() {
		const res = await getUserDetailById(this.$route.params.id)
		this.formHolder.holderName = res.username
		this.formHolder.holderPass = res.password
		for (const i in res) {
			if (i === 'username' || i === 'password') {
				this.formData[i] = ''
			} else {
				this.formData[i] = res[i]
			}
		}
	},
	methods: {
		handleClick(e) {
			// console.log(e)
		},
		/* 取消提交 */
		handleCancel() {
			console.log(this.$refs.userForm)
			this.$refs.userForm.resetFields()
		},
		/* 确认提交 */
		handleSubmit() {
			this.$refs.userForm.validate(async(isOk) => {
				if (isOk) {
					await updateUserDetailById(this.$route.params.id, this.formData)
					this.$message.success('密码修改成功，请重新登录！')
					await removeToken()
					this.$router.replace('/login')
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.userForm{
		position: relative;
		width: 520px;
		max-width: 100%;
		margin: 0 auto;
		.el-form-item{
			margin-top: 20px;
		}
	}
</style>
